<template>
  <div>
    <div class="head flex">
        <i v-if="PublishType == 1" class="el-icon-arrow-left"  @click="SETPUBLISHSTATE({index:LastInfo?.PublishState,title:LastInfo?.PublishTitle})"></i>
        <i v-else class="el-icon-close"  @click="SETPUBLISHSTATE({index:0,type:null})"></i>
        <div class="box flex">
      
        </div>
        <el-button type="primary" icon="el-icon-position" @click="publish_">下一步</el-button>
    </div>
    <v-md-editor
       class="md"
       v-model="form.content"
        :toolbar="toolbar"
       :left-toolbar="leftToolbar"
       :right-toolbar="rightToolbar"
       :default-show-toc="true"
       :include-level="[2,3]"
       :disabled-menus="[]"
       @upload-image="handleUploadImage"
       @save="handleSave"
    ></v-md-editor>
  </div>
</template>
<script>
import { file } from '@/common/file';
import { mapActions, mapMutations,mapState} from 'vuex';
import MarkDownData from './data'
export default {
  name: "",
  computed:{
     ...mapState('Init',['ArticleTypeData']),//类型
     ...mapState('Article',['LastInfo','PublishData','PublishType']),
     ...mapState('Login',['User']) 
  },
  data() {
    return {
      ImageUrls:[],
      form:{
         image:'',
         content:'',
         classify:3,
      },
      toolbar:MarkDownData,
      titleLength:0,
      leftToolbar: "undo redo clear | h bold italic ul ol table hr | link image code | tip template history",
      rightToolbar: "preview toc sync-scroll save",
    };
  },
  mounted() {
     this.init()
  },
  methods: {
    ...mapMutations('Article',['SETPUBLISHSTATE']), //设置发布组件状态
    ...mapActions('Article',['Publish']),
    init(){
  
        this.form.content = this.PublishData?.content
        this.ImageUrls = Object.assign([],this.PublishData?.image) || []
    },
    //保存记录
    handleSave(text, html){
       localStorage.setItem("MarkDownHistory",text)
       this.$message.success("保存成功")
    },
    //上传图片
    async handleUploadImage(event, insertImage, files) {

       let res = await file.uploadImage('ArticleImage',files[0])
      if(res.code == 200)
      {  
         insertImage({
          url: res.data,
          desc: "自定义",
         });
     
         this.ImageUrls.push(res.data);
         return
      }
      if(res.code == -1)  return this.$public.toLogin()
      return this.$message.error(res.message)
    },
     //发布
    async  publish_(){
           if(this.form.content=='') return this.$message.error('内容不能为空')
           if(this.User==null) return this.$message.error('非法发布')
           this.form.ImageUrls = this.ImageUrls
           this.form.image=this.ImageUrls.toString() || null;
            let title = this.PublishType == 1 ?'发布':'修改'
            return this.SETPUBLISHSTATE({index:6,title,data:this.form})
      }
   
  },
};
</script>
<style scoped lang='less'>

.head{
  max-width: 100vw;
  width: 100%;
  height: 60px;
  background: white;
  padding: 0 20px;
  box-sizing: border-box;
  justify-content: space-between;

  i{
    font-size: 25px;
  }
}
.md{
   max-width: 100vw;
  width: 100%;
  height: calc( 100% - 60px );
  border: none;
  //  background: var(--GeneralBackColor-half);
}
</style>